<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <link rel="stylesheet" href="../css/personal_center.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="shortcut icon" href="../img/title/招聘求职.png" type="image/x-icon">
</head>
<body>
    <div id="app">
		<div class="header">
			<div class="header_left">
				<img src="../img/main/招聘会.png">
				<a href="./main.html">&nbsp;校园兼职管理</a>
			</div>
			<div class="header_center">
				<ul>
					<li><a href="./main.html">主页</a></li>
					<li><a href="./work_list.html">职位</a></li>
					<li><a href="./news.html">校园新闻</a></li>
				</ul>
			</div>
			<div class="header_right">
				<el-button @click="loginBtn" type="success" icon="el-icon-user-solid">登录</el-button>
				<el-button @click="registerBtn" type="success" icon="el-icon-takeaway-box">注册</el-button>
			</div>
		</div>
		<div class="section">
			<div class="section_1">个人中心</div>
			<div class="section_2">首页 > 个人中心</div>
		</div>
		<div class="content">
			<div class="content_pagecking">
				<div class="content_left">
					<div class="content_left_top">
						<div class="block"><el-avatar :size="80" :src="userMsgList.user_image"></el-avatar></div>
					</div>
					<div class="content_left_bottom">
						<div class="content_left_bottom_item">
							<el-button @click="btn1" type="primary" style="width: 90%;height: 100%;" icon="el-icon-s-order">个人信息</el-button>
						</div>
						<div class="content_left_bottom_item">
							<el-button @click="btn2" type="primary" plain  style="width: 90%;height: 100%;" icon="el-icon-user-solid">修改密码</el-button>
						</div>
						<div class="content_left_bottom_item">
							<el-button @click="btn3" type="primary" plain  style="width: 90%;height: 100%;" icon="el-icon-s-custom">投递过的岗位</el-button>
						</div>
						<div class="content_left_bottom_item">
							<el-button @click="btn4" type="primary" plain  style="width: 90%;height: 100%;" icon="el-icon-s-tools">退出登录</el-button>
						</div>
					</div>
				</div>
				<div class="content_right">
					<div class="content_right_item">
						<div style="width: 100%;height: 30%;font-size: 17px">用户名:</div>
						<el-input v-model="userMsgList.username" placeholder="请填写用户名"></el-input>
					</div>
					<div class="content_right_item">
						<div style="width: 100%;height: 30%;font-size: 17px">姓名:</div>
						<el-input v-model="userMsgList.name" placeholder="请填写姓名"></el-input>
					</div>
					<div class="content_right_item">
						<div style="width: 100%;height: 30%;font-size: 17px">邮箱:</div>
						<el-input v-model="userMsgList.email" placeholder="请填写邮箱"></el-input>
					</div>
					<div class="content_right_item">
						<div style="width: 100%;height: 30%;font-size: 17px">手机号:</div>
						<el-input v-model="userMsgList.phone_number" placeholder="请填写手机号"></el-input>
					</div>
					<div class="content_right_item">
						<div style="width: 100%;height: 30%;font-size: 17px">地址:</div>
						<el-input v-model="userMsgList.address" placeholder="请填写地址"></el-input>
					</div>
					<div class="content_right_item">
						<div style="width: 100%;height: 30%;font-size: 17px">年龄:</div>
						<el-input v-model="userMsgList.age" placeholder="请填写年龄"></el-input>
					</div>
					<div class="content_right_item">
						<div style="width: 100%;height: 30%;font-size: 17px">工作状态:</div>
						<el-select style="width: 100%;" v-model="userMsgList.work_status" clearable placeholder="请选择">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
					</div>
					<div class="content_right_item">
						<div style="width: 100%;height: 30%;font-size: 17px">性别:</div>
						<el-select style="width: 100%;" v-model="userMsgList.sex" clearable placeholder="请选择">
						    <el-option
						      v-for="item in options1"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						  </el-select>
					</div>
					<div class="content_right_footer">
						<el-button @click="updateUserMsg" style="width: 100%;height: 65%;" type="success">确认修改</el-button>
					</div>
				</div>
			</div>
			

		</div>
    </div>
</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/jquery-3.6.1.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="../js/after_landing.js"></script>
<script>
    const vm = new Vue({
        el : '#app',
        data(){
            return {
				options: [{
				          value: '在校',
				          label: '在校'
				        }, {
				          value: '在职',
				          label: '在职'
				        }, {
				          value: '离职',
				          label: '离职'
				        }],
				options1: [{
				          value: '男',
				          label: '男'
				        }, {
				          value: '女',
				          label: '女'
				        }],
				userMsgList: [],
            }
        },
        created(){
			let username = getCookie("cookie_username")
			if (username !== null && username.length > 0) {
				axios.get('/users/' + username).then((resp) => {
					this.userMsgList = resp.data.data
					$('.header_center ul').append(
						`<li><a href="./personal_resume.html">简历</a></li>`)
					$('.header_center ul').append(`<li><a style="color: lawngreen;" href="./personal_center.html">个人中心</a></li>`)
					$('.header_right').empty()
					let url = this.userMsgList.user_image
					$(".header_right").append(
						`<img style="width: 7%;margin-right: 5px" src="${url}">${username}`);
					$(".header_right").append(
						`<a style="text-decoration: none;color: #77838e;margin-left: 5px" href="/logins/logout">注销</a>`
					);
				})
			} else {
				document.location.href = "login.html"
			}
        },
        methods:{
            loginBtn(){
            	window.location.replace("/pages/login.html");
            },
            registerBtn() {
            	document.location.href = "register.html"
            },
			async updateUserMsg(){
				await axios.post("/users/updateUserMsg",this.userMsgList).then((resp)=>{
					if (resp.data.data === true) {
						this.$message.success("用户信息修改成功！")
						setTimeout(()=>{
							document.location.reload();
						},1000)
					} else {
						this.$message.error("用户信息修改失败！")
					}
				})
				await this.getAll();
			},
			getAll(){
				let username = getCookie("cookie_username")
				if (username !== null && username.length > 0) {
					axios.get('/users/' + username).then((resp) => {
						this.userMsgList = resp.data.data
					})
				} else {
					document.location.href = "login.html"
				}
			},
			btn1(){
				document.location.href = "personal_center.html"
			},
			btn2(){
				document.location.href = "personal_center_resetPwd.html"
			},
			btn3(){
				document.location.href = "personal_center_sendResumeMsg.html"
			},
			btn4(){
				document.location.href = "/logins/logout";
			},
        }
    })
</script>
</html>